<template>
	<view class="product-item" @tap="toDetail">
		<view class="cover-box">
			<image :src="cover | formatFile" class="cover" mode=""></image>
			<view class="tag" v-if="showTag">
				<image :src="currentTag.bg" class="bg" mode=""></image>
				<view class="content flex-y-center">
					<image :src="currentTag.icon" mode=""></image>
					<text>{{currentTag.name}}</text>
				</view>
			</view>
		</view>
	
		<view class="product-info">
			<view class="product-name">{{productInfo.productTitle}}</view>
			<view class="gray-text">
				{{productInfo.createTime.split(' ')[0]}} ｜ {{productInfo.province}} {{productInfo.city}}
			</view>
			<view class="flex-x-bet-y-center">
				<view class="">
					<text class="price">{{productInfo.showPrice | formatMoney}}</text>
					<text style="color:#333;font-size: 28rpx;font-weight: normal;" v-if="productInfo.putType == 3">/月</text>
				</view>
				<image v-if="productInfo.isVerify == 1" src="/static/images/icon-checked.png" mode="" class="icon-checked"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import { toast } from '../../utils/uni-api';
	import { addProductDiff } from '@/api/product.js'
	export default {
		name: "ProductItem",
		props: {
			showTag:{
				default: true
			},
			productInfo:{
				default: () => {}
			},
			from: {
				default:''
			}
		},
		data() {
			return {
				tags: [{
						type: 1,
						name: '厂家',
						icon: '/static/images/icon-type-1.png',
						bg: '/static/images/icon-type-1-bg.png'
					},
					{
						type: 2,
						name: '二手',
						icon: '/static/images/icon-type-2.png',
						bg: '/static/images/icon-type-2-bg.png'
					}, {
						type: 3,
						name: '租赁',
						icon: '/static/images/icon-type-3.png',
						bg: '/static/images/icon-type-3-bg.png'
					}
				],
			};
		},
		computed:{
			currentTag(){
				return this.tags.find(item => item.type == this.productInfo.putType)
			},
			cover(){
				return this.productInfo.productImg ? this.productInfo.productImg.split(',')[0] : ''
			}
		},
		methods:{
			toDetail(){
				// 设备对比 添加设备
				if(this.from === 'compare'){
					addProductDiff({productId: this.productInfo.id}).then(res => {
						toast('添加成功', true)
					}).finally(() => {
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					})
				}else if(this.from === 'collect'){
					this.$myUni.navTo('/pages/product/detail-product?id=' + this.productInfo.productId )
				}
				else{
					this.$myUni.navTo('/pages/product/detail-product?id=' + this.productInfo.id )
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.product-item {
		display: flex;
		margin-bottom: 38rpx;

		.cover-box {
			position: relative;
			width: 260rpx;
			height: 180rpx;
			border-radius: 10rpx;

			.cover {
				width: 100%;
				height: 100%;
			}
			
			.tag{
				position: absolute;
				top: 20rpx;
				left: -4rpx;
				width: 92rpx;
				height: 42rpx;
				
				
				.bg{
					position: absolute;
					inset: 0;
					z-index: 1;
					width: 92rpx;
					height: 42rpx;
				}
				
				.content{
					position: relative;
					top: 5rpx;
					z-index: 2;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-size: 22rpx;
					
					image{
						width: 24rpx;
						height: 22rpx;
						margin-right: 5rpx;
					}
				}
			}
		}
	
		.product-info{
			flex:1;
			margin-left: 30rpx;
			height: 180rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			
			.product-name{
				font-weight: bold;
				font-size: 31rpx;
				color: #333333;
			}
			
			.gray-text{
				font-weight: 500;
				font-size: 24rpx;
				color: #787C88;
				padding: 15rpx 0;
			}
			
			.icon-checked{
				width: 140rpx;
				height: 45rpx;
			}
			
			.price{
				font-weight: bold;
				font-size: 35rpx;
				color: #F42D1F;
			}
		}
	}
</style>